<!-- src/components/DiamondNode.vue -->
<template>
    <div class="diamond-node">
      <!-- 输入 handle -->
      <handle type="target" position="top" />
  
      <!-- 节点本体 -->
      <div class="diamond">
        <div class="label">{{ data.label }}</div>
      </div>
  
      <!-- 输出 handle -->
      <handle type="source" position="bottom" />
    </div>
  </template>
  
  <script setup>
  import { Handle } from '@vue-flow/core'
  
  defineProps({
    data: Object
  })
  </script>
  
  <style scoped>
  .diamond-node {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: visible; /* 允许 handle 溢出 */
  }
  
  .diamond {
    width: 100%;
    height: 100%;
    background: #2ec4b6;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #333;
    color: white;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .label {
    transform: rotate(-45deg);
    text-align: center;
    pointer-events: none;
  }
  </style>
  